<template>
	<view class="personalInfo">
		<view class="avatarBox">
			<!-- //头像 -->
			<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="user.head_img_url ? imageUrl+user.head_img_url : avatorit"
					mode="aspectFill"></image>
			</button>
		</view>
		<view class="FormsBox">
			<view>
				<text>昵称</text>
				<input type="text" placeholder="请输入昵称" placeholder-class="placeholderStyle" v-model="user.nickname" />
				<image src="../../static/myself/lefticon.png" mode=""></image>
			</view>
			<view>
				<text>电话</text>
				<input type="tel" placeholder="请输入手机号" placeholder-class="placeholderStyle" v-model="user.phone_num" />
				<image src="../../static/myself/lefticon.png" mode=""></image>
			</view>
			<view>
				<text>性别</text>
				<picker mode="selector" :range="sex.map(item => item.label)" @change="sexChange"
					:value="getSexIndex(user.sex)">
					<input type="text" disabled="true" placeholder="请选择性别" placeholder-class="placeholderStyle"
						:value="sex[getSexIndex(user.sex)].label" />
				</picker>
				<image src="../../static/myself/lefticon.png" mode=""></image>
			</view>
			<view @click="chooseLocation">
				<text>城市</text>
				<input type="text" disabled="true" placeholder="请选择城市" placeholder-class="placeholderStyle"
					v-model="user.position" />
				<image src="../../static/myself/lefticon.png" mode=""></image>
			</view>
			<button type="default" @click="formSubmit">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		imageUrl
	} from '@/config/request/request';
	import {
		onMounted,
		ref
	} from 'vue';
	import {
		GetUser,
		PutUserData
	} from '@/config/API/user';
	import {
		onShow
	} from '@dcloudio/uni-app';
	import {
		uploadFile
	} from '@/config/request/request.js';

	// 表单
	onMounted(async () => {
		const data = await GetUser();
		user.value = data.data;
		console.log('用户信息:', user.value);
	});

	const user = ref({
		head_img_url: '',
		nickname: '',
		phone_num: '',
		sex: '', // 1: 男, 2: 女
		position: '',
	});

	// 头像
	const avatorit = ref('https://img.js.design/assets/smartFill/img341164da748e08.jpg');

	const onChooseAvatar = async (e) => {
		try {
			const {
				avatarUrl
			} = e.target;
			const response = await uploadFile.upload(avatarUrl);
			console.log('上传结果:', response);

			if (response.data && response.data[0]) {
				user.value.head_img_url = response.data[0];
				console.log('头像更新成功:', user.value.head_img_url);
			} else {
				console.warn('上传成功，但未返回有效的头像 URL');
				uni.showToast({
					title: '上传成功，但未返回有效的头像 URL',
					icon: 'none',
				});
			}
		} catch (error) {
			console.error('头像上传失败:', error);
			uni.showToast({
				title: '头像上传失败，请重试',
				icon: 'none',
			});
		}
	};

	// 性别选择
	const sex = ref([{
			value: 1,
			label: '男'
		},
		{
			value: 2,
			label: '女'
		},
	]);

	// 性别选择事件
	const sexChange = (e) => {
		const selectedIndex = e.detail.value; // 获取选中的索引
		user.value.sex = sex.value[selectedIndex].value; // 根据索引获取对应的 value
		console.log('性别选择:', user.value.sex);
	};

	// 根据 sex 值获取性别标签
	const getSexIndex = (sexValue) => {
		return sexValue === 1 ? 0 : sexValue === 2 ? 1 : 0; // 默认选中第一个选项
	};

	// 选择城市
	const chooseLocation = () => {
		uni.chooseLocation({
			success: async (res) => {
				console.log(res);
				user.value.position = res.name;
			},
			fail: (e) => {
				console.log(e, "报错");
			},
		});
	};

	// onShow 拿到数据
	onShow(() => {
		const userInfo = uni.getStorageSync('userInfo');
		// user.value.nickname = userInfo.username;
		// user.value.phone_num = userInfo.email;
	});

	// 提交表单数据
	const formSubmit = async () => {
		const itemfrom = {
			head_img_url: user.value.head_img_url,
			sex: user.value.sex, // 1: 男, 2: 女
			nickname: user.value.nickname,
			phone_number: user.value.phone_num,
			position: user.value.position,
		};
		console.log('用户信息:', user.value);
		console.log('提交数据:', itemfrom);

		const data = await PutUserData(itemfrom);
		console.log('修改结果:', data);

		if (data.code == 200) {
			uni.showToast({
				title: '保存成功',
				icon: 'success',
			});
		} else {
			uni.showToast({
				title: '保存失败',
				icon: 'error',
			});
		}
	};
</script>

<style scoped>
	.personalInfo {
		width: 100%;
		min-height: 100vh;
		background-color: #f1f1f1;
	}

	.avatarBox {
		width: 100%;
		height: 160rpx;
		display: flex;
		justify-content: center;
		padding: 100rpx 0;
	}

	.avatarBox button {
		width: 180rpx;
		height: 180rpx;
		border-radius: 50%;
		background-color: #f1f1f1;
		padding: 0;
	}

	.avatarBox button::after {
		border: none;
	}

	.avatar {
		width: 100%;
		height: 100%;
	}

	.camera {
		width: 36rpx;
		height: 36rpx;
		border-right: 36rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(70%, -70%);
	}

	.FormsBox {
		width: 100%;
		min-height: calc(100vh - 360rpx);
		background: #FFFFFF;
		border-radius: 28rpx 28rpx 0rpx 0rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.FormsBox button {
		width: 400rpx;
		background: #000;
		color: #fff;
		border-radius: 50rpx;
		position: absolute;
		bottom: 12vh;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.FormsBox>view {
		width: 100%;
		min-height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #f5f5f5;
	}

	.FormsBox image {
		width: 14rpx;
		height: 26rpx;
	}

	.FormsBox text {
		width: 120rpx;
		font-family: Lantinghei SC, Lantinghei SC;
		font-weight: 200;
		font-size: 28rpx;
		color: rgba(0, 19, 76, 0.9);
		text-align: left;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
	}

	.FormsBox input {
		width: 50%;
		font-family: Lantinghei SC, Lantinghei SC;
		font-weight: 600;
		font-size: 28rpx;
		color: rgba(0, 19, 76, 0.9);
		text-align: left;
		font-style: normal;
		text-transform: none;

	}

	/deep/.placeholderStyle {
		font-family: Lantinghei SC, Lantinghei SC;
		font-weight: 200;
		font-size: 28rpx;
		color: rgba(0, 19, 76, 0.4);
		text-align: left;
		font-style: normal;
		text-transform: none;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>